<template>
    <div class="hot">
        <div class="hot-header">
            <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
            <span class="hot-left">本周热门榜单</span>
            <div class="title-right">
                全部榜单
                <span class="iconfont">&#xe644;</span>
            </div>
        </div>
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"  id="srcoll">
            <div class="mui-scroll hot-list">
                <div class="hot-item mui-control-item" v-for="(item, index) in list" :key="index">
                    <div class="images-ready">
                          <img :src="item.imgUrl" alt="">
                           <div class="hot-sight">{{ item.name }}</div>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
import mui from '../../../../static/mui/js/mui.min.js'
import '../../../../static/mui/css/mui.css'
export default {
  name: 'HomeHotList',
  props: {
    list: Array
  },
  mounted () {
    mui.init()
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005
    })
  }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
     .mui-segmented-control.mui-scroll-wrapper
        height 3rem
    .hot
        background #fff
        margin-top: .2rem
        .hot-header
                padding: .24rem 0 .26rem;
                position relative
            .title-img
                display inline-block
                width .3rem
                height .3rem
                vertical-align middle
                margin-left .2rem
            .hot-left
                display inline-block
                height .44rem
                line-height .44rem
                font-size .32rem
            .title-right
               font-size .24rem
               position absolute
               top 50%
               right 0
               transform translate(0,-50%)
               margin-right .3rem
     .hot-list
        padding: 0 .24rem;
        .hot-item
            padding: .06rem 0 .2rem
            width: 2rem
            margin 0 .1rem
            .images-ready
                width 100%
                height 100%
                img
                    width 100%
                .hot-sight
                    margin-top: .13rem
                    color: #212121
                    font-size: .24rem
                    line-height: .32rem
                    text-align: center
                    ellipsis()
</style>
